<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Counters"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Counters</h1>
                            <p class="lead text-dark">Use Pixel's custom animated counters to showcase numbers and statistics.
                            </p>
                        </div>
                        <div id="example" class="my-5">
                            <h5 class="mb-3">Default example</h5>
                            <p>Change the numbers inside the <code class="text-danger">.counter</code> element to update the content of the counter.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="row">
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-dark d-block">500</span>
                                                        <span class="h5 text-gray">Happy people</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-dark d-block">1560</span>
                                                        <span class="h5 text-gray">Units Ordered</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-dark d-block">5478</span>
                                                        <span class="h5 text-gray">Subscribers</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-dark d-block">12031</span>
                                                        <span class="h5 text-gray">Lines of Code</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-dark d-block&#x22;&#x3E;500&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Happy people&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-dark d-block&#x22;&#x3E;1560&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Units Ordered&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-dark d-block&#x22;&#x3E;5478&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Subscribers&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-dark d-block&#x22;&#x3E;12031&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Lines of Code&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="colors" class="my-5">
                            <h5 class="mb-3">Color variations</h5>
                            <p>Use modifier classes <code class="text-danger">.text-*</code> (eg. <code class="text-danger">.text-primary</code>) on the text elements to update their color.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-primary d-block">500</span>
                                                        <span class="h5 text-gray">Happy people</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-secondary d-block">1560</span>
                                                        <span class="h5 text-gray">Units Ordered</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-tertiary d-block">5478</span>
                                                        <span class="h5 text-gray">Subscribers</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
                                                        <span class="counter display-3 text-info d-block">12031</span>
                                                        <span class="h5 text-gray">Lines of Code</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-primary d-block&#x22;&#x3E;500&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Happy people&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-secondary d-block&#x22;&#x3E;1560&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Units Ordered&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-tertiary d-block&#x22;&#x3E;5478&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Subscribers&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 col-lg-3 mb-4 mb-lg-0&#x22;&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-info d-block&#x22;&#x3E;12031&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Lines of Code&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="icons" class="my-5">
                            <h5 class="mb-3">Icons</h5>
                            <p>Using the following markup you can use icons above the counters:</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="row">
                                                    <!--Counter-->
                                                    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
                                                        <div class="icon icon-shape icon-shape-primary rounded-circle mr-2 mr-md-0 mb-2">
                                                            <i class="far fa-grin-hearts"></i>
                                                        </div>
                                                        <span class="counter display-3 text-primary d-block">500</span>
                                                        <span class="h5 text-gray">Happy people</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
                                                        <div class="icon icon-shape icon-shape-secondary mr-2 mr-md-0 mb-2">
                                                            <i class="fas fa-box-open"></i>
                                                        </div>
                                                        <span class="counter display-3 text-secondary d-block">1560</span>
                                                        <span class="h5 text-gray">Units Ordered</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
                                                        <div class="icon icon-shape icon-tertiary mr-2 mr-md-0 mb-2">
                                                            <div class="organic-shape scale-1">
                                                                <svg class="organic-shape-tertiary" width="90" height="90" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                                                    <g transform="translate(300,300)">
                                                                        <path d="M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z" />
                                                                    </g>
                                                                </svg>
                                                            </div>
                                                            <div class="z-2"><i class="fas fa-fingerprint"></i></div>
                                                        </div>
                                                        <span class="counter display-3 text-tertiary d-block">5478</span>
                                                        <span class="h5 text-gray">Subscribers</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                    <!--Counter-->
                                                    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
                                                        <div class="icon icon-info mr-2 mr-md-0 mb-4">
                                                            <i class="fas fa-brain"></i>
                                                        </div>
                                                        <span class="counter display-3 text-info d-block">12031</span>
                                                        <span class="h5 text-gray">Lines of Code</span>
                                                    </div>
                                                    <!--End of Counter-->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 mb-3 col-lg-3 mb-lg-0&#x22;&#x3E;
        &#x3C;div class=&#x22;icon icon-shape icon-shape-primary rounded-circle mr-2 mr-md-0 mb-2&#x22;&#x3E;
            &#x3C;i class=&#x22;far fa-grin-hearts&#x22;&#x3E;&#x3C;/i&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-primary d-block&#x22;&#x3E;500&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Happy people&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 mb-3 col-lg-3 mb-lg-0&#x22;&#x3E;
        &#x3C;div class=&#x22;icon icon-shape icon-shape-secondary mr-2 mr-md-0 mb-2&#x22;&#x3E;
            &#x3C;i class=&#x22;fas fa-box-open&#x22;&#x3E;&#x3C;/i&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-secondary d-block&#x22;&#x3E;1560&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Units Ordered&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 mb-3 col-lg-3 mb-lg-0&#x22;&#x3E;
        &#x3C;div class=&#x22;icon icon-shape icon-tertiary mr-2 mr-md-0 mb-2&#x22;&#x3E;
            &#x3C;div class=&#x22;organic-shape scale-1&#x22;&#x3E;
                &#x3C;svg class=&#x22;organic-shape-tertiary&#x22; width=&#x22;90&#x22; height=&#x22;90&#x22; viewBox=&#x22;0 0 600 600&#x22; xmlns=&#x22;http://www.w3.org/2000/svg&#x22;&#x3E;
                    &#x3C;g transform=&#x22;translate(300,300)&#x22;&#x3E;
                        &#x3C;path d=&#x22;M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z&#x22; /&#x3E;
                    &#x3C;/g&#x3E;
                &#x3C;/svg&#x3E;   
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;z-2&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-fingerprint&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-tertiary d-block&#x22;&#x3E;5478&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Subscribers&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
    &#x3C;!--Counter--&#x3E;
    &#x3C;div class=&#x22;col-6 mb-3 col-lg-3 mb-lg-0&#x22;&#x3E;
        &#x3C;div class=&#x22;icon icon-info mr-2 mr-md-0 mb-4&#x22;&#x3E;
            &#x3C;i class=&#x22;fas fa-brain&#x22;&#x3E;&#x3C;/i&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;span class=&#x22;counter display-3 text-info d-block&#x22;&#x3E;12031&#x3C;/span&#x3E;
        &#x3C;span class=&#x22;h5 text-gray&#x22;&#x3E;Lines of Code&#x3C;/span&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;!--End of Counter--&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#colors" class="nav-link " data-smooth-scroll>Colors</a>
                            </li>
                            <li class="nav-item">
                                <a href="#icons" class="nav-link " data-smooth-scroll>Icons</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>